import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter/widgets.dart';

class RadioDemo extends StatefulWidget {
  const RadioDemo({Key? key}) : super(key: key);

  @override
  State<RadioDemo> createState() => _RadioDemoState();
}

class _RadioDemoState extends State<RadioDemo> {
 Object groupValue = 1;
 bool selectA = false;
 bool selectB = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:const Text("Radio 单选框") ,
        centerTitle: true,
      ),
      body: Column(
        children: [
          Container(
            height: 300,
            margin: EdgeInsets.all(12),
            padding: EdgeInsets.all(20),
            color: Colors.grey[400],
            child:Column(
              children: [
                Row(
                  children: [
                    Radio(
                      // 唯一值  当前radio 的标识
                      value: 1, 
                      // 是一组单选框的记录
                      groupValue: groupValue, 
                      // 选中的颜色
                      activeColor: Colors.red,
                      onChanged: (value){
                        groupValue = value!;
                        setState(() {
                          
                        });
                      }
                    ),
                     Text("选项1"),
                  ],
                ),
                Row(
                  children: [
                    Radio(
                      value: 2, 
                      groupValue: groupValue, 
                      onChanged: (value){
                         groupValue = value!;
                         setState(() {
                           
                         });
                      }
                    ),
                     Text("选项2"),
                  ],
                ),
                Container(color: Colors.white,height: 1,margin: EdgeInsets.only(bottom: 20),),
                GestureDetector(
                  onTap: (){
                    setState(() {
                      selectA = true;
                      selectB = false;
                    });
                  },
                  child: Row(
                    children: [
                      Image.asset(selectA?"assets/select.png":"assets/unselect.png",height: 25,width: 25,),
                      SizedBox(width: 12),
                      Text("选项A")
                    ],
                  ),
                ),
                SizedBox(height: 10,),
                GestureDetector(
                  onTap: (){
                    setState(() {
                      selectB = true;
                      selectA = false;
                    });
                  },
                  child: Row(
                    children: [
                      Image.asset(selectB?"assets/select.png":"assets/unselect.png",height: 25,width: 25,),
                      SizedBox(width: 12),
                      Text("选项B")
                    ],
                  ),
                )
               
              ],
            )
          ),
         

         
        ],
      ),
    );
    
  }
}